<template>
    <view class="school-accreditation">
         <!-- <van-toast id="van-toast" /> -->

        <!-- 顶部标题栏 -->
        <title-block title="桂电认证" backUrl="/pages/my/index"></title-block>
        <!-- 提示弹窗 -->
        <u-top-tips ref="uTips"></u-top-tips>
        <!-- 加载缓冲块 -->
        <!-- <view class="cu-load bg-blue {{!isLoad?'loading':''}}" v-if="bindStatic==0"></view> -->
        <u-loading style="position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;" :show="loadIng" color="primary"></u-loading>
        <!-- 认证 -->
        <view class="login animation-fade" v-if="bindStatic==2">
            <view>
                <image :src="bigLogo" mode="aspectFit"></image>
            </view>

            <view class="authorization">
                <view class="open-data-avatar">
                    <img :src="userInfo.userAvatar" alt="" width="100%" height="100%">
                </view>

                <view class="swtchICON">
                    <text class="cuIcon-order text-gray"></text>
                </view>
                <view style="position: relative;">
                    <image class="imgGra" :src="smLogo" mode="aspectFit"></image>
                </view>
            </view>
            <view class="fromItem">
                <view class="cu-form-group">
                    <view class="title">选择您的身份:</view>
                    <view class="id">
                        <view class="">
                            <view :class="IDVal==1?'bg-blue select tagView':'line-grey noselect tagView'" @click="idSwitch"
                                data-id="1">教师</view>
                        </view>
                        <view>
                            <view :class="IDVal==2?'bg-blue select tagView':'line-grey noselect tagView'" @click="idSwitch"
                                data-id="2">学生</view>
                        </view>
                    </view>
                </view>
                <view class="animation-fade" style="animation-delay: 0.1s;">
                        <u-notice-bar mode="horizontal" type="warning" :speed="200"  :is-circular="false" :list="list"></u-notice-bar>
                </view>
                <view class="cu-form-group " style="animation-delay: 0.3s;" >
                    <view class="title">{{IDVal==2?'学号':'工号'}} :</view>
                    <u-input v-model="us" type="text" :placeholder="IDVal==2?'请输入学号':'请输入工号'" />
                </view>
                <view class="cu-form-group animation-fade" style="animation-delay: 0.5s;" >
                    <view class="title">密码 :</view>
                     <u-input v-model="pwd" type="password" placeholder="请输入密码" />
                </view>
                <view class="cu-form-group btnView animation-fade" style="animation-delay: 0.7;">
                    <button class="cu-btn block bg-blue margin-tb-sm lg" @click="loginEvent">
                        <text :class="loadicon?'cuIcon-loading2 iconfont-spin':'iconfont-spin' "></text>登录认证</button>
                </view>
            </view>
        </view>

        <!-- 注销界面 -->
        <view class="container2 animation-fade" v-if="bindStatic==1">

            <view class="authorization" style="display: flex;align-items: center;justify-content: center;">
                <view class="open-data-avatar">
                    <img :src="userInfo.userAvatar" alt="" width="100%" height="100%">
                </view>

                <view class="swtchICON" style="color: rgb(0, 178, 106);">
                    <text class="cuIcon-order"></text>
                </view>
                <view>
                    <image :src="smLogo" mode="aspectFit"></image>
                </view>
            </view>

            <view>
                <view class="cu-form-group">状态：
                    <text class="cu-tag bg-cyan">已认证</text>
                </view>
                <view class="cu-form-group">身份：
                    <text
                        :class="userInfo.isTeacher?' cu-tag bg-blue light':'cu-tag bg-purple light' ">{{userInfo.isTeacher?'教师':'学生'}}</text>
                </view>
                <view class="cu-form-group">{{userInfo.isTeacher?'工号':'学号'}}：
                    <text class="">{{stuAndTeaInfo.stuNum}}</text>
                </view>
                <view class="cu-form-group">姓名：
                    <text class="">{{stuAndTeaInfo.name}}</text>
                </view>
                <view class="cu-form-group" v-if="!userInfo.isTeacher">所属：
                    <text class="">{{stuAndTeaInfo.dptname}}</text>
                </view>
                <button :class="loadicon?'cuIcon-loading2 bg-red lg button-hover downBtn':'bg-red lg button-hover downBtn'" @click="cancelUserAuthentication">注销认证</button>
            </view>
        </view>
        <!-- 底部 -->
         <view class="log_box" style="padding-top:40rpx;padding-bottom:20rpx;" v-if="bindStatic!=0">
            <view class="num_info">
                已有
                <text :style="`color:${StyleColor}`">{{StuNumCou}}</text>位桂电人
            </view>
            <view class="num_info">与你一同完成了桂电身份认证</view>
            <view class="per_box">
                <view class="per" :style="`background: ${StyleColor};opacity: 1;`"></view>
                <view class="per" :style="`background: ${StyleColor};opacity: 0.75;`"></view>
                <view class="per" :style="`background: ${StyleColor};opacity: 0.5;`"></view>
                <!-- <view class="per" style="width:{{stuNum[3].num*600}}rpx;background: {{StyleColor}};opacity: 0.25;"></view> -->
            </view>
            <!-- <view class="num_box">
                <view class="color" :style="`background: ${StyleColor};opacity: 1;`">{{stuNum[0].rank}}级</view>
                <view class="num">{{stuNum[0].num}}人</view>
                <view class="color" :style="`background: ${StyleColor};opacity: 0.75;`">{{stuNum[1].rank}}级</view>
                <view class="num">{{stuNum[1].num}}人</view>
            </view>
            <view class="num_box">
                <view class="color" :style="`background: ${StyleColor};opacity: 0.5;`">{{stuNum[2].rank}}级</view>
                <view class="num">{{stuNum[2].num}}人</view>
                <view class="color" :style="`background: ${StyleColor};opacity: 0.25;`">{{stuNum[3].rank}}级</view>
                <view class="num">{{stuNum[3].num}}人</view>
            </view> -->
            <view class="num_box" >
                <view class="item" v-for="(item,index) in stuNum" :key="index">
                    <view class="color-55aaff" :style="`opacity: ${item.opacity}`">{{item.rank}}级</view>
                    <view class="num">{{item.num}}人</view>
                </view>
            </view>

            <view class="tips">*数据 每隔三日更新（不区分各个校区）</view>
        </view> 

        <!-- ColUI 评委提示框 -->
        <!-- <view class=" modalName=='vip'?'show cu-modal':'cu-modal'" @clicl="hideModal">
            <view class="cu-dialog" catchtap>
                <view class="cu-bar bg-white justify-end">
                    <view class="content cu-tag bg-red" style="font-size: 43rpx;">禁止注销</view>
                </view>
                <view class="padding-xl" style="text-align: left; font-size: 34rpx;">
                    <view>当前为评委身份，<text class="text-orange">无法注销</text></view>
                    <view>如需注销更换绑定信息，请先退出登录</view>
                    <view>并使用<text class="text-green" style="font-weight: bold;">微信登录</text>即可更换绑定信息</view>
                </view>
            </view>
        </view> -->

    </view>
</template>

<script>
import {getUserInfoUsingGET,guetAuthUsingGET} from "/common/api/user";
import {getStuInfoMyUsingGET,getTeacherInfoMyUsingGET,cancelcerUsingGET,certificationUsingPOST} from '/common/api/guet'
import titleBlock from "/compoents/titleBlock";
export default {
    components:{
        titleBlock
    },
    data(){
        return{
		IDVal: 1,
		us: '',
		pwd: '',
		LoginStatic: 0,
		bindStatic: 0,
		loadicon: false,
        list: ['若未曾修改,则默认密码为 123456'],
        loadIng:false,
		// schData: {
		// 	name: '',
		// 	spname: '',
		// 	username: '',
		// 	stid: ''
		// },
		// key: app.globalData.keySchInfo,
		// 系统参数
		// navBarHeight: app.globalData.navBarHeight,
		// menuRight: app.globalData.menuRight,
		// menuBotton: app.globalData.menuBotton,
		// menuHeight: app.globalData.menuHeight,
		// 底部参数
		StyleColor: "#55aaff",
		stuNum: [{
				rank: 2020,
				num: 0,
                opacity:1,
			}, {
				rank: 2019,
				num: 0,
                opacity:0.75,
			},
			{
				rank: 2018,
				num: 0,
                opacity:0.5,
			}, {
				rank: 2017,
				num: 0,
                opacity:0.25,
			}
		],
		StuNumCou: 0,
		bigLogo: 'http://image.glowworm.club/resourse/%E6%A0%A1%E5%8C%BAlogo.png',
		smLogo: 'http://image.glowworm.club/resourse/%E6%A0%A1%E5%BE%BD.jpg',
        userInfo:{
			authentication: false,
			nickname:'',
			userAvatar:'../../static/images/avatar.jpeg',
			roles:null,
            isTeacher:false,
            stid:''
		},
        stuAndTeaInfo:{
            stuNum:'',
            name: '',
            dptname:''
        }
	}
},
    onLoad(){
        this.getUserAuthentication()
        this.numCount()
    },
    onReachBottom(){console.log('onReachBottom')},
    methods:{
    //登录认证
    loginEvent(){
        this.loadIng=true
        const data={
            tp:this.IDVal,
            us: this.us,
		    pwd: this.pwd,
        }
        certificationUsingPOST(data).then(res=>{
                if(res.data.code==200){
                    this.bindStatic=1
                    this.getIsTeacher()
                }
                this.$refs.uTips.show({
				title: res.data.message,
				type: 'success',
			})
            this.loadIng=false
        })
    },
    idSwitch(){
        this.IDVal=this.IDVal==1?2:1
    },
    //获取用户信息
    getUserInfo(){
			this.userInfo.userAvatar=this.$store.state.userInfo.userAvatar
            this.userInfo.isTeacher=this.$store.state.userInfo.isTeacher
            if(this.bindStatic==1){
                this.getIsTeacher()
            }
    },
    //获取用户是学生或是老师信息
    getIsTeacher(){
        if(this.userInfo.isTeacher){
            getTeacherInfoMyUsingGET().then(res=>{  
                this.stuAndTeaInfo.name=res.data.data.name
                this.stuAndTeaInfo.stuNum=res.data.data.username
            })
        }else{
            getStuInfoMyUsingGET().then(res=>{
                this.stuAndTeaInfo.name=res.data.data.name
                this.stuAndTeaInfo.stuNum=res.data.data.stid
                this.stuAndTeaInfo.dptname=res.data.data.dptname
            })
        }
    },
    //查看用户是否认证
    getUserAuthentication(){
        guetAuthUsingGET().then(res=>{
            if(res.data.code==200){
                this.bindStatic=1
            }else{
                this.bindStatic=2
            }
            this.getUserInfo()
            this.$refs.uTips.show({
				title: res.data.message,
				type: 'warning',
			})
        })
    },
    //解绑用户认证
    cancelUserAuthentication(){
        this.loadIng=true
        cancelcerUsingGET().then(res=>{
            console.log(res)
            // if(res.data.code==200){
            this.bindStatic=2
            this.us=''
            this.pwd=''
            // }else{
                this.$refs.uTips.show({
				title: res.data.message,
				type: 'primary',
			})
            // }
            this.loadIng=false
        })
    },
    // 底部数据(伪)
	numCount() {
		// let stuNum = this.stuNum;
		var baseNum = 40;
		var num = 0;
		var date = new Date();
		let year = date.getMonth() > 9 ? date.getFullYear() : date.getFullYear() - 1;

		this.stuNum.forEach((v, i, arr) => {
			v.num = baseNum + i * 10 + baseNum / 2 * (i + 1) + 3 * (i + 3) + baseNum * 7;
			v.rank = year--;
			num += v.num
		})
        this.StuNumCou=num
		// this.setData({
		// 	stuNum: stuNum,
		// 	StuNumCou: num
		// });
	},
    }
}
</script>

<style lang="scss" scoped>
.school-accreditation{
    .container,
.container {
	margin: 0 auto;
}

.viewFlex {
	display: flex;
	width: 482rpx;
	justify-content: space-around;
}

.btnView {
	display: flex;
	align-items: center;
	justify-content: center;
}

.container2 {
	font-size: 36rpx;
	margin: 50rpx auto ;
}

.downBtn {
	margin-top: 10rpx;
}

/*新增样式  */
.toptit {
	display: flex;
	justify-content: center;
	font-size: 36rpx;
	font-weight: bold;
}

.login {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login image {
	width: 660rpx;
	height: 300rpx;
}

.id {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.id>view {
	margin: 0 auto;
	width: 100rpx;
	margin-left: 50rpx;
	text-align: center;
}

.fromItem,
.container2 {
	width: 85%;
	padding: 16rpx;
	border-radius: 40rpx;
	background-color: #fff;
}

.container2 .authorization,
.authorization {
	display: flex;
	align-items: center;
	justify-items: center;
}

.open-data-avatar,
.authorization image {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	border: 10rpx solid rgba(255, 255, 255, 0.5);
	overflow: hidden;
}

.imgGra {
	filter: grayscale(100%);
}

.shaowImg {
	position: absolute;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

.swtchICON {
	font-size: 100rpx;
	transform: rotate(90deg);
}

.tagView {
	padding: 4rpx;
	font-size: 36rpx;
}

.select {
	border: 2rpx solid rgb(0, 129, 255);
}

.noselect {
	border: 2rpx solid rgb(135, 153, 163);
}

/* 底部信息 */
.log_box {
	width: 85%;
	margin: 75rpx auto;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 0 0rpx 30rpx rgba(0, 0, 0, 0.05);
	padding-top: 20rpx;
}

/*  */
.num_info {
	text-align: center;
	line-height: 50rpx;
	font-size: 32rpx;
	color: #515151;
}

.num_info text {
	font-weight: bold;
	font-size: 40rpx;
	color: #47a86c;
}

/*  */
.per_box {
	margin-top: 10rpx;
	padding: 20rpx 0rpx;
	display: flex;
	justify-content: center;
}

.per_box .per {
	/* min-width: 150rpx; */
	background: #47a86c;
	height: 30rpx;
	opacity: 1;
}

/*  */
.num_box {
    width: 100%;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    .item{
        width: 250rpx;
        display: flex;
        justify-content: center;
        margin-top:20rpx;
        .color-55aaff{
            background: #55aaff;
            border-radius: 10rpx;
            padding: 5rpx;
        }
    }
        .num {
        margin-left: 10rpx;
        line-height: 40rpx;
        width: 80rpx;
        color: #515151;
        font-size: 28rpx;
    }

}

    .tips {
        text-align: center;
        color: #B5B5B5;
        font-size: 22rpx;
        margin-top: 20rpx;
    }

}
</style>